<!DOCTYPE HTML>  
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
#canvas {border:1px solid red;}
</style>
<script type="text/javascript">
	function upload() {
		var dv = document.getElementById('result');
		var files = document.getElementById('upload').files;
		var f = files[0];
		
		var r = new FileReader();
		r.onload = function(e) {
			alert(e);
			dv.innerHTML = r.result;
		}
		r.readAsDataURL(f);
//		r.readAsBinaryString(f);
//		r.readAsText(f, 'gbk');	
	}
	
	window.onload = function() {
		var canvas = document.getElementById('canvas');
		var c = canvas.getContext('2d');
		var pi = Math.PI;
		var canW = 1000;
		var canH = 600;
		
	/*	c.fillStyle = '#f00';
		c.strokeStyle = '#000';
		
		c.beginPath();
		c.moveTo(10, 10);
		
		for (var i = 0; i < 20; i++) {
			var x = Math.round(Math.random() * 500),
				y = Math.round(Math.random() * 500);
				
		//	c.lineTo(x, y);		
		//	c.bezierCurveTo(50, 200, 400, 200, 300, 300);
		//	c.quadraticCurveTo(150, 300, 300, 100)	
			c.quadraticCurveTo(x/2, y/2, x, y);
		}
		c.closePath();
		c.stroke();
		c.fill();
	*/
	
		// 渐变
	/*	var lg = c.createLinearGradient(0, 0, 400, 400);
		lg.addColorStop(0, '#f00');
		lg.addColorStop(.3, '#0f0');
		lg.addColorStop(.6, '#00f');
		lg.addColorStop(1, '#000');
		c.fillStyle = lg;
		c.fillRect(0,0,500,500);
	
		var rg = c.createRadialGradient(300, 300, 50, 350, 350, 250);
		rg.addColorStop(0, '#f00');	
		rg.addColorStop(.5, '#0f0');
		rg.addColorStop(1, '#00f');
		c.fillStyle = rg;
		c.fillRect(0, 0, 600, 600);
	*/
	
//		c.fillStyle = '#f00';
//		c.fillRect(300, 300, 100, 100);	

//		c.translate(100, 100);
//		c.scale(2, 2);
//		c.rotate(Math.PI/4)


//		for (var i = 0; i < 3600; i++) {
//			c.rotate(pi/3600 * i);
//			c.fillRect(300, 300, 100, 100);	
//		}

//		var x = y = 0;
//		c.translate(300, 300);		
//		setInterval(function(){
//			c.translate(x, y);
//			x = y = 0;
//			c.clearRect(-300 - x, -300 - y, 600, 600);	
//		//	c.rotate(pi/180);						
//			c.fillRect(-50, -50, 100, 100);
//		}, 100);
//
//		document.onkeyup = function(e) {
//			switch (e.keyCode)	{
//			case 37:
//				x -= 10;
//				break;
//			case 38:
//				y -= 10;
//				break;
//			case 39:
//				x += 10;
//				break;
//			case 40:
//				y += 10;
//				break;		
//						
//			}
//		}

	// 涂鸦	
//		c.lineWidth = 1;
//		var state = false,
//			x, y;
//		canvas.onmousedown = function(e) {
//			state = true;
//			c.moveTo(e.offsetX, e.offsetY);
//		}
//		canvas.onmouseup = function(e) {
//			state = false;
//			c.lineTo(e.offsetX + 1, e.offsetY + 1);
//			c.stroke();
//		}
//		canvas.onmousemove = function(e) {
//			if (state) {
//				c.lineTo(e.offsetX, e.offsetY);
//				c.stroke();	
//			}
//		}


		// 图像
		var img = new Image();
//		img.crossOrigin = 'http://profile.ak.fbcdn.net/crossdomain.xml'
		img.onload = function() {
		/*	c.drawImage(img, 0, 0, 150, 150);
		
			var ptn = c.createPattern(img, 'repeat');
			c.fillStyle = ptn;
			c.fillRect(0, 0, canW, canH);
		
		
			c.beginPath();
			c.moveTo(100, 100);
			c.lineTo(200, 100);
			c.lineTo(150, 200);
			c.closePath();
		//	c.fill();
			c.save();
			c.clip();
			
			c.drawImage(img, 50, 50);
			

			c.restore();
			c.fillStyle = 'red';
			c.fillRect(150, 150, 100, 100);*/
			
			
			c.fillStyle = 'red';
			c.fillRect(320, 0, 400, 100);
			
		//	c.globalCompositeOperation = 'lighter';
			
			c.drawImage(img, 0, 0);
			var imgData = c.getImageData(0, 0, img.width, img.height);
			var data = imgData.data;
			for (var i = 0, n = data.length; i < n; i += 4) {
				// 红
			//	data[i] = 0;
				// 绿
			//	data[i + 1] /= 2;
				// 蓝
			//	data[i + 2] /= 2;
				// 透明度
				data[i + 3] = 255 / 2;
				
			}
			
			c.putImageData(imgData, img.width + 10, 0);
			
		}
//		img.src = 'file:///C:/Documents%20and%20Settings/lenovo/%E6%A1%8C%E9%9D%A2/img/1.jpg';
		img.src = 'data:image/jpeg;base64,......';


		// 绘制文字
		c.fillStyle = 'red';
		c.strokeStyle = 'blue';
		c.font = 'bold 30px Arial';
	//	c.textAlign = 'center';
	//	c.textBaseline = 'middle';
		var txt = '河南省郑州市';
		var met = c.measureText(txt);
	//	alert('width:' + met.width);
		c.fillText(txt, 0, 30);
		
		c.strokeText(txt, 0, 80);
		

	}
	function savePic() {
		var dataURL = $$('canvas').toDataURL('image/png');
		$$('canvasImg').src = dataURL;	
	}
	
	function $$(id) {
		return document.getElementById(id);	
	}
</script>

</head>
<body>
	<input type="file" id="upload" multiple />
	<input type="button" onClick="upload()" value="提交" />
	
    <div id="result"></div>
    
    <!--<img src="img/1.jpg" width="100"/><br/>
    <a href="http://www.baidu.com">百度</a><br/>-->
    
    <canvas id="canvas" width=1000 height=600></canvas><br/>
    <button onClick="savePic()">保存图片</button><br/>
    <img id="canvasImg" src="" style2="position:absolute;top:100px; left:0"/>
    
    
</body>
</html>